import { imgUpload } from "@/utils";
import { css } from "@emotion/css";
import styled from "@emotion/styled";
import React, { useState } from "react";
export const Demo = styled.div`
	width: 100%;
	height: 200px;
	background-color: #ff7;
`;
/**
 * 图片组件
 * @param url 图片地址
 * @param width 图片宽度
 * @param onClick 点击事件
 * @param style 图片样式
 */
export const Img: React.FC<{
	url: string;
	width: number;
	onClick?: () => void;
	style?: React.CSSProperties;
}> = ({ url, width, onClick, style }) => (
	<div
		className={css`
			background-image: url(${url});
			width: ${width}px;
			height: ${width}px;
			background-size: cover;
			border-radius: 50%;
			background-position: center;
			cursor: pointer;
		`}
		onClick={onClick}
		style={style}
	/>
);

/**
 * 图片上传组件
 * @param width 图片宽度
 * @param url 图片地址
 * @param setValue 设置图片地址
 * @param style 图片样式
 */
export const ImgUpload: React.FC<{
	width: number;
	url: string;
	style?: React.CSSProperties;
	setValue: (value: string) => void;
}> = ({ width, url, setValue, style }) => {
	const upload = () => {
		imgUpload().then((res: any) => {
			setValue(res);
			setImgUrl(res);
		});
	};
	const [imgUrl, setImgUrl] = useState(url);
	return (
		<div>
			<Img url={imgUrl} width={width} onClick={upload} style={style} />
		</div>
	);
};

/**
 * 加载组件
 * @param type 加载类型
 */
export const Loading: React.FC<{ type?: string }> = ({ type }) => {
	return (
		<>
			{(() => {
				switch (type) {
					case "1":
						return <Progress1 />;
					case "2":
						return <Progress2 />;
					default:
						return <Progress2 />;
				}
			})()}
		</>
	);
};
const Progress1 = styled.div`
	position: relative;
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	border-top-color: rgba(0, 0, 0, 0.2);
	border-bottom-color: rgba(0, 0, 0, 0.2);
	border-right-color: rgba(0, 0, 0, 0.2);
	border-radius: 100%;
	animation: circle infinite 0.75s linear;
	@keyframes circle {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
`;
const Progress2 = styled.div`
	--r1: 154%;
	--r2: 68.5%;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,
		radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,
		radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right, #ccc;
	background-size: 50.5% 220%;
	background-position: -100% 0%, 0% 0%, 100% 0%;
	background-repeat: no-repeat;
	animation: p9 2s infinite linear;
	@keyframes p9 {
		33% {
			background-position: 0% 33%, 100% 33%, 200% 33%;
		}
		66% {
			background-position: -100% 66%, 0% 66%, 100% 66%;
		}
		100% {
			background-position: 0% 100%, 100% 100%, 200% 100%;
		}
	}
`;
